<template>
  <div class="container">
    <div class="closeBtn">
      <span class="iconfont iconicon-test"></span>
    </div>

    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>

    <div class="inputName">
      <!-- 使用组件 -->
      <authInput
        type="text"
        placeholder="请输入手机号"
        rule="^\d{4,16}$"
        err_message="请输入正确的手机号"
        @input="setUserName"
      />
    </div>

    <div class="inputPwd">
      <authInput
        type="password"
        placeholder="请输入密码"
        rule="^\d{3,16}$"
        err_message="请输入正确的密码"
        @input="setPassword"
      />
    </div>
    <div class="btn">
      <authBtn text="登陆" @send="sendLogin" />
    </div>
    <div class="register">
      还没有账户?
      <router-link class="Text" to="/register">立即注册</router-link>
    </div>
  </div>
</template>

<script>
// 引入组件
import authInput from "./components/authInput";
import authBtn from "./components/authBtn";
import { log } from "util";

export default {
  // 注册组件
  components: {
    authInput: authInput,
    authBtn: authBtn
  },
  data() {
    return {
      userName: "",
      password: ""
    };
  },
  methods: {
    setUserName(name) {
      // 接受到的 name 数据存储自身的data上 是通过@emit传输过来的
      this.userName = name;
      // console.log('父组件收到子组件用户传输数据:',this.userName);
    },
    setPassword(password) {
      this.password = password;
    },
    sendLogin() {
      console.log("登陆按钮被点击");
      // 发送 ajax 请求
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.userName,
          password: this.password
        }
      }).then(res => {
        // 登陆成功逻辑  其他逻辑在main拦截器哪里处理
        if (res.data.statusCode == 200) {
          // 保存数据
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("user_id", res.data.data.user.id);
          // 弹出提示
          this.$toast.success(res.data.message);
          // 设置一定时间,跳转到个人信息页
          // 编程式导航
          var timer = setTimeout(() => {
            // 定时器用完后清理定时器
            clearTimeout(timer);
            // 跳转
            this.$router.push({
              name: "homePage"
            });
          }, 1000);
        }
      });
      /*
        this.$axios({
          url,
          method,
          // data 针对 post 方法
          // params 针对 get 方法
        }).then(res=>{
          then是执行完上面的 然后 在执行这个
        })
      
      */
    }
  }
};
</script>

<style lang="less" scoped>
// scoped 是一个局部 css 声明
.container {
  padding: 0 5.556vw;
}
.closeBtn {
  padding-top: 5.556vw;
  .iconfont {
    font-size: 7.5vw;
  }
}
.logo {
  display: flex;
  justify-content: center;
  .iconfont {
    font-size: 35vw;
    color: #d81e06;
  }
}
.btn {
  margin-top: 8.333vw;
}
.register {
  text-align: center;
  margin-top: 6.667vw;
  font-size: 4.444vw;
  .Text {
    color: skyblue;
  }
}
</style>
